<template>
  <div class="allowance-container">
    <!-- Header -->
    <div class="header-panel">
      <div class="time-selection">
        <span class="label">开始时间</span>
        <el-date-picker
          v-model="searchParams.startTime"
          type="datetime"
          placeholder="选择开始日期时间"
          class="custom-date-picker"
          size="small"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </div>
      <div class="time-selection">
        <span class="label">结束时间</span>
        <el-date-picker
          v-model="searchParams.endTime"
          type="datetime"
          placeholder="选择结束日期时间"
          class="custom-date-picker"
          size="small"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </div>
      <div class="search-actions">
        <button class="btn query-btn" @click="handleSearch">查询</button>
        <button class="btn reset-btn" @click="handleReset">重置</button>
      </div>
    </div>

    <!-- Content -->
    <div class="content-panel">
      <!-- Left Column -->
      <div class="column">
        <div class="table-section">
          <div class="table-header">各钢种宽度余量大于15占比</div>
          <el-table :data="allowanceGt15ByGrade" style="width: 100%" height="100%" border size="small">
             <el-table-column type="index" label="序号" width="50" />
             <el-table-column prop="steelGrade" label="钢种" width="90" />
             <el-table-column prop="count" label="数量" width="60" align="center"/>
             <el-table-column prop="avgAllowance" label="宽度余量平均值[mm]" align="center"/>
             <el-table-column prop="percentage" label="占比[%]" width="70" align="center"/>
             <el-table-column prop="avgDeviation" label="宽度偏差均值[mm]" align="center"/>
             <el-table-column prop="stdDevDeviation" label="宽度偏差标准差" align="center"/>
          </el-table>
        </div>
        <div class="table-section">
          <div class="table-header">各钢种宽度余量大于10占比</div>
           <el-table :data="allowanceGt10ByGrade" style="width: 100%" height="100%" border size="small">
             <el-table-column type="index" label="序号" width="50" />
             <el-table-column prop="steelGrade" label="钢种" width="90" />
             <el-table-column prop="count" label="数量" width="60" align="center"/>
             <el-table-column prop="avgAllowance" label="宽度余量平均值[mm]" align="center"/>
             <el-table-column prop="percentage" label="占比[%]" width="70" align="center"/>
             <el-table-column prop="avgDeviation" label="宽度偏差均值[mm]" align="center"/>
             <el-table-column prop="stdDevDeviation" label="宽度偏差标准差" align="center"/>
          </el-table>
        </div>
        <div class="table-section">
          <div class="table-header">各钢种宽度余量大于5占比</div>
           <el-table :data="allowanceGt5ByGrade" style="width: 100%" height="100%" border size="small">
             <el-table-column type="index" label="序号" width="50" />
             <el-table-column prop="steelGrade" label="钢种" width="90" />
             <el-table-column prop="count" label="数量" width="60" align="center"/>
             <el-table-column prop="avgAllowance" label="宽度余量平均值[mm]" align="center"/>
             <el-table-column prop="percentage" label="占比[%]" width="70" align="center"/>
             <el-table-column prop="avgDeviation" label="宽度偏差均值[mm]" align="center"/>
             <el-table-column prop="stdDevDeviation" label="宽度偏差标准差" align="center"/>
          </el-table>
        </div>
      </div>

      <!-- Right Column -->
      <div class="column">
         <div class="table-section">
          <div class="table-header">按钢种宽度分档统计宽度余量大于15占比</div>
           <el-table :data="allowanceGt15ByGradeWidth" style="width: 100%" height="100%" border size="small">
             <el-table-column type="index" label="序号" width="50" />
             <el-table-column prop="steelGrade" label="钢种" width="80" />
             <el-table-column prop="widthRange" label="宽度范围" width="100" />
             <el-table-column prop="count" label="数量" width="60" align="center"/>
             <el-table-column prop="avgAllowance" label="宽度余量平均值[mm]" align="center"/>
             <el-table-column prop="percentage" label="占比[%]" width="70" align="center"/>
             <el-table-column prop="avgDeviation" label="宽度偏差均值[mm]" align="center"/>
             <el-table-column prop="stdDevDeviation" label="宽度偏差标准差" align="center"/>
          </el-table>
        </div>
        <div class="table-section">
          <div class="table-header">按钢种宽度分档统计宽度余量大于10占比</div>
           <el-table :data="allowanceGt10ByGradeWidth" style="width: 100%" height="100%" border size="small">
             <el-table-column type="index" label="序号" width="50" />
             <el-table-column prop="steelGrade" label="钢种" width="80" />
             <el-table-column prop="widthRange" label="宽度范围" width="100" />
             <el-table-column prop="count" label="数量" width="60" align="center"/>
             <el-table-column prop="avgAllowance" label="宽度余量平均值[mm]" align="center"/>
             <el-table-column prop="percentage" label="占比[%]" width="70" align="center"/>
             <el-table-column prop="avgDeviation" label="宽度偏差均值[mm]" align="center"/>
             <el-table-column prop="stdDevDeviation" label="宽度偏差标准差" align="center"/>
          </el-table>
        </div>
        <div class="table-section">
          <div class="table-header">按钢种宽度分档统计宽度余量大于5占比</div>
            <el-table :data="allowanceGt5ByGradeWidth" style="width: 100%" height="100%" border size="small">
             <el-table-column type="index" label="序号" width="50" />
             <el-table-column prop="steelGrade" label="钢种" width="80" />
             <el-table-column prop="widthRange" label="宽度范围" width="100" />
             <el-table-column prop="count" label="数量" width="60" align="center"/>
             <el-table-column prop="avgAllowance" label="宽度余量平均值[mm]" align="center"/>
             <el-table-column prop="percentage" label="占比[%]" width="70" align="center"/>
             <el-table-column prop="avgDeviation" label="宽度偏差均值[mm]" align="center"/>
             <el-table-column prop="stdDevDeviation" label="宽度偏差标准差" align="center"/>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

// --- Interfaces --- 
interface SearchParams {
  startTime: string | null;
  endTime: string | null;
}

interface AllowanceStat {
  steelGrade: string;
  count: number;
  avgAllowance: number;
  percentage: number;
  avgDeviation: number;
  stdDevDeviation: number;
}

interface AllowanceStatWidth extends AllowanceStat {
  widthRange: string;
}

// --- Reactive State --- 
const searchParams = reactive<SearchParams>({
  startTime: '2025-04-02 13:21:31', // Default from image
  endTime: '2025-04-09 13:21:31'   // Default from image
});

// --- Mock Data --- 
// Left Column Data (Grouped by Steel Grade)
const allowanceGt15ByGrade = ref<AllowanceStat[]>([
  { steelGrade: 'SPHC-MB', count: 0, avgAllowance: 0.11, percentage: 0.00, avgDeviation: 17.80, stdDevDeviation: 1.90 },
  { steelGrade: 'SPHC-QC', count: 0, avgAllowance: -1.96, percentage: 0.00, avgDeviation: 17.64, stdDevDeviation: 2.02 },
  { steelGrade: 'SPHC-Mn2', count: 0, avgAllowance: -0.99, percentage: 0.00, avgDeviation: 17.64, stdDevDeviation: 2.43 },
  { steelGrade: 'SPHE-TQC', count: 0, avgAllowance: 1.00, percentage: 0.00, avgDeviation: 18.12, stdDevDeviation: 0.85 },
  { steelGrade: 'SPHE-MJ', count: 0, avgAllowance: 0.34, percentage: 0.00, avgDeviation: 17.24, stdDevDeviation: 1.00 },
  { steelGrade: 'SPHC-LT', count: 0, avgAllowance: -0.74, percentage: 0.00, avgDeviation: 17.62, stdDevDeviation: 2.24 },
]);

const allowanceGt10ByGrade = ref<AllowanceStat[]>([
   { steelGrade: 'SPHC-MB', count: 0, avgAllowance: 0.11, percentage: 0.00, avgDeviation: 17.80, stdDevDeviation: 1.90 },
   { steelGrade: 'SPHC-QC', count: 0, avgAllowance: -1.96, percentage: 0.00, avgDeviation: 17.64, stdDevDeviation: 2.02 },
   { steelGrade: 'SPHC-Mn2', count: 0, avgAllowance: -0.99, percentage: 0.00, avgDeviation: 17.64, stdDevDeviation: 2.43 },
   { steelGrade: 'SPHE-TQC', count: 0, avgAllowance: 1.00, percentage: 0.00, avgDeviation: 18.12, stdDevDeviation: 0.85 },
   { steelGrade: 'SPHE-MJ', count: 0, avgAllowance: 0.34, percentage: 0.00, avgDeviation: 17.24, stdDevDeviation: 1.00 },
   { steelGrade: 'SPHC-LT', count: 0, avgAllowance: -0.74, percentage: 0.00, avgDeviation: 17.62, stdDevDeviation: 2.24 },
]);

const allowanceGt5ByGrade = ref<AllowanceStat[]>([
  { steelGrade: 'SPHE', count: 1, avgAllowance: 2.44, percentage: 20.00, avgDeviation: 19.78, stdDevDeviation: 1.21 },
  { steelGrade: 'SPHE-TQC', count: 2, avgAllowance: 1.00, percentage: 1.77, avgDeviation: 18.12, stdDevDeviation: 0.85 },
  { steelGrade: 'SPHE-T', count: 4, avgAllowance: 0.89, percentage: 1.34, avgDeviation: 18.51, stdDevDeviation: 1.30 },
  { steelGrade: 'SPHC-MB', count: 1, avgAllowance: 0.11, percentage: 0.44, avgDeviation: 17.80, stdDevDeviation: 1.90 },
]);

// Right Column Data (Grouped by Steel Grade and Width Range)
const allowanceGt15ByGradeWidth = ref<AllowanceStatWidth[]>([
  { steelGrade: 'SPHE-T', widthRange: '1000-1200', count: 0, avgAllowance: 0.27, percentage: 0.00, avgDeviation: 17.64, stdDevDeviation: 0.97 },
  { steelGrade: '170P1', widthRange: '1000-1200', count: 0, avgAllowance: -4.50, percentage: 0.00, avgDeviation: 14.19, stdDevDeviation: 0.94 },
  { steelGrade: 'SPHE-TQC', widthRange: '0-1000', count: 0, avgAllowance: 1.58, percentage: 0.00, avgDeviation: 18.72, stdDevDeviation: 0.85 },
  { steelGrade: 'SPHC-MB', widthRange: '1000-1200', count: 0, avgAllowance: 0.10, percentage: 0.00, avgDeviation: 16.98, stdDevDeviation: 0.83 },
  { steelGrade: 'SPHE-T', widthRange: '1200-1400', count: 0, avgAllowance: 3.17, percentage: 0.00, avgDeviation: 22.21, stdDevDeviation: 3.34 },
  { steelGrade: 'SPHC-WK', widthRange: '1200-1400', count: 0, avgAllowance: 0.69, percentage: 0.00, avgDeviation: 17.93, stdDevDeviation: 2.58 },
]);

const allowanceGt10ByGradeWidth = ref<AllowanceStatWidth[]>([
   { steelGrade: 'SPHE-T', widthRange: '1000-1200', count: 0, avgAllowance: 0.27, percentage: 0.00, avgDeviation: 17.64, stdDevDeviation: 0.97 },
   { steelGrade: '170P1', widthRange: '1000-1200', count: 0, avgAllowance: -4.50, percentage: 0.00, avgDeviation: 14.19, stdDevDeviation: 0.94 },
   { steelGrade: 'SPHE-TQC', widthRange: '0-1000', count: 0, avgAllowance: 1.58, percentage: 0.00, avgDeviation: 18.72, stdDevDeviation: 0.85 },
   { steelGrade: 'SPHC-MB', widthRange: '1000-1200', count: 0, avgAllowance: 0.10, percentage: 0.00, avgDeviation: 16.98, stdDevDeviation: 0.83 },
   { steelGrade: 'SPHE-T', widthRange: '1200-1400', count: 0, avgAllowance: 3.17, percentage: 0.00, avgDeviation: 22.21, stdDevDeviation: 3.34 },
   { steelGrade: 'SPHC-WK', widthRange: '1200-1400', count: 0, avgAllowance: 0.69, percentage: 0.00, avgDeviation: 17.93, stdDevDeviation: 2.58 },
]);

const allowanceGt5ByGradeWidth = ref<AllowanceStatWidth[]>([
  { steelGrade: 'SPHE', widthRange: '1200-1400', count: 1, avgAllowance: 5.60, percentage: 100.00, avgDeviation: 24.19, stdDevDeviation: 2.00 }, // Image data slightly unclear, adjusted percentage
  { steelGrade: 'SPHE-T', widthRange: '1200-1400', count: 4, avgAllowance: 3.17, percentage: 0.52, avgDeviation: 22.21, stdDevDeviation: 3.34 }, // Percentage seems off in image, adjusted slightly
  { steelGrade: 'SPHE-TQC', widthRange: '0-1000', count: 2, avgAllowance: 1.58, percentage: 3.17, avgDeviation: 18.72, stdDevDeviation: 0.85 },
  { steelGrade: 'SPHC-MB', widthRange: '0-1000', count: 1, avgAllowance: 0.97, percentage: 2.63, avgDeviation: 17.80, stdDevDeviation: 1.03 }, // Adjusted values
]);

// --- Handlers --- 
const handleSearch = () => {
  console.log('查询参数:', searchParams);
  // Add search logic here
};

const handleReset = () => {
  searchParams.startTime = null;
  searchParams.endTime = null;
  console.log('重置参数');
  // Add reset logic here
};

</script>

<style scoped>
.allowance-container {
  background-color: #0a1a3a;
  color: #c0c4cc;
  padding: 15px;
  height: 100%; 
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.header-panel {
  background-color: #1c2d5a; 
  padding: 10px 15px;
  border-radius: 3px;
  margin-bottom: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.time-selection {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 5px; /* Add margin for wrapping */
}

.time-selection .label {
  margin-right: 8px;
  white-space: nowrap;
  font-size: 12px;
}

:deep(.custom-date-picker.el-date-editor) {
  width: 190px !important; /* Adjusted width for datetime */
  height: 28px;
  background-color: #0a1a3a;
  border: 1px solid #3a5a8a;
  box-shadow: none;
}
:deep(.custom-date-picker .el-input__wrapper) {
   padding-right: 5px; /* Reduce padding to fit clear icon */
}
:deep(.custom-date-picker .el-input__inner) { color: #c0c4cc; font-size: 12px; height: 26px; line-height: 26px;}
:deep(.custom-date-picker .el-input__prefix) {
  left: 5px;
}
:deep(.custom-date-picker .el-input__icon) { line-height: 28px; font-size: 12px; color: #c0c4cc; }
:deep(.custom-date-picker .el-input__suffix) {
   right: 5px;
}

.search-actions {
  display: flex;
  align-items: center;
  margin-left: auto; /* Push buttons to the right */
  margin-bottom: 5px; /* Align with time selectors when wrapped */
}

.btn {
  height: 28px;
  padding: 0 15px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  color: #fff;
}
.query-btn { background-color: #2979ff; }
.query-btn:hover { background-color: #5393ff; }
.reset-btn { background-color: #3a5a8a; }
.reset-btn:hover { background-color: #5a7aa4; }

/* Content */
.content-panel {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  gap: 15px;
  overflow: hidden; 
}

.column {
  flex: 1; /* Equal width columns */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between tables in a column */
  overflow: hidden; /* Prevent column overflow */
}

.table-section {
  flex: 1; /* Equal height for tables within a column */
  min-height: 0; /* Allow shrinking */
  background-color: #1c2d5a;
  border: 1px solid #3a5a8a;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

.table-header {
  padding: 8px 15px;
  background-color: rgba(41, 121, 255, 0.1);
  border-bottom: 1px solid #3a5a8a;
  text-align: center;
  font-weight: bold;
  color: #fff;
  flex-shrink: 0;
}

/* Deep table styles (Consistent) */
:deep(.el-table) {
  background-color: transparent;
  --el-table-border-color: #3a5a8a;
  --el-table-header-bg-color: #2a5caa; 
  --el-table-header-text-color: #fff;
  --el-table-tr-bg-color: #0f2142;
  --el-table-row-hover-bg-color: #183153;
  --el-table-text-color: #c0c4cc;
  --el-table-border: none; 
}

:deep(.el-table th.el-table__cell),
:deep(.el-table--small th.el-table__cell) { 
  background-color: var(--el-table-header-bg-color) !important;
  color: var(--el-table-header-text-color);
  padding: 4px 8px !important;
  font-weight: normal;
  text-align: center;
  border-color: #3a5a8a !important;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table--small td.el-table__cell) {
  padding: 4px 8px !important;
  text-align: center;
  border-color: #3a5a8a !important;
  color: var(--el-table-text-color);
  background-color: var(--el-table-tr-bg-color) !important;
}

:deep(.el-table--border .el-table__cell) {
   border-right: 1px solid #3a5a8a;
}
:deep(.el-table--border th.el-table__cell) {
   border-bottom: 1px solid #3a5a8a;
}


:deep(.el-table__body-wrapper) { 
   scrollbar-width: thin;
   scrollbar-color: #3a5a8a #142a52; 
}
:deep(.el-table__body-wrapper::-webkit-scrollbar) { width: 6px; height: 6px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) { background: #142a52; border-radius: 3px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) { background-color: #3a5a8a; border-radius: 3px; }


</style>
